<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/head::head('广告机 - 广告机管理后台')">
</head>
<!--/* <editor-fold desc="define"> */-->
<!--/*@thymesVar id="loginUser" type="com.xmlan.machine.module.user.entity.User"*/-->
<!--/*@thymesVar id="adminPath" type="java.lang.String"*/-->
<!--/*@thymesVar id="page" type="com.github.pagehelper.PageInfo<com.xmlan.machine.module.advertisementMachine.entity.AdvertisementMachine>"*/-->
<!--/*@thymesVar id="adCount" type="java.util.List<com.xmlan.machine.module.advertisement.entity.AdvertisementCount>"*/-->
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<!--/*@thymesVar id="codeNumber" type="java.lang.String"*/-->
<!--/*@thymesVar id="addTime" type="java.lang.String"*/-->
<!--/*@thymesVar id="deleteToken" type="java.lang.String"*/-->
<!--/*@thymesVar id="open" type="java.lang.String"*/-->
<!--/* </editor-fold> */-->
<body>
<script type="text/javascript" src="../../../static/application/js/echarts.min.js"></script>
<th:block th:include="/common/header::header('machine')"/>
<main style="z-index: 0;height: 80%">
  <div class="page-title z-depth-1 blue-grey darken-2">
    <div class="white-text">
      <span class="flow-text">
        <a class="btn-flat"><i class="material-icons white-text">list</i></a>广告机列表
      </span>
    </div>
  </div>
  <br/>
  <div id="main-content" class="container">
    <div id="search-box">
      <form th:action="@{${adminPath}+'/advertisementMachine/list/1'}" method="post">
        <input name="open" type="hidden" th:value="${open}">
        <ul class="collapsible popout" data-collapsible="accordion">
          <li>
            <div class="collapsible-header"><i class="material-icons">search</i>条件搜索</div>
            <div class="collapsible-body">
              <div class="row">
                <div class="col s12 m10 l10 center">
                  <div class="input-field col s12 m4 l4">
                    <input type="text" id="name" name="name" th:value="${name}"/>
                    <label for="name">按广告机名称</label>
                  </div>
                  <div class="input-field col s12 m4 l4">
                    <input type="text" id="codeNumber" name="codeNumber" th:value="${codeNumber}"/>
                    <label for="codeNumber">按广告机识别码</label>
                  </div>
                  <div class="input-field col s12 m4 l4">
                    <input type="text" id="addTime" name="addTime" class="date-picker"
                           placeholder="选择日期" th:value="${addTime==' '?'':addTime}"/>
                    <label for="addTime">按加入时间</label>
                  </div>
                </div>
                <div class="col s12 m2 l2 center">
                  <div class="input-field col s12 m12 l12">
                    <button type="submit"
                            class="btn-floating btn-large waves-effect waves-light green">
                      <i class="material-icons">search</i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </form>
    </div>
    <table class="highlight responsive-table">
      <thead>
      <tr>
        <th>
          <input type="button" style="display:block" id="selectAll" value="全选" class="btn">
          <input type="button" style="display:none" id="closeAll" value="取消" class="btn red">
        </th>
        <th>名称</th>
        <th>地址</th>
        <th>加入时间</th>
        <th>机器识别码</th>
        <th>广告数</th>
        <th>灯</th>
        <th>充电状态</th>
        <th>
          <select id="control_light" class="amber-text" style="display: block">
            <option value="1">正常开灯</option>
            <option value="0">关灯</option>
            <option value="2">20%亮度</option>
            <option value="5">50%亮度</option>
            <option value="8">80%亮度</option>
            <option value="10">100%亮度</option>
          </select>
          <input class="amber-text blue" type="button" style="display:block;float: right" th:if="${loginUser.id!=10}"  id="openLight" value="控灯">
        </th>
      </tr>
      </thead>
      <tbody class="card">
        <tr th:each="item:${page.list}">
         <td><input type="checkbox" name="checkbox" th:value="*{item.id}"></td>
        <td th:text="*{item.name}">name</td>
        <td th:text="*{#strings.abbreviate(item.addrStr,30)}">addrStr</td>
        <td th:text="*{#strings.substring(item.addTime,0,10)}">addTime</td>
        <td th:text="*{#strings.abbreviate(item.codeNumber,15)}">codeNumber</td>
        <th:block th:each="count:${adCount}">
          <td th:if="${item.id==count.id}" th:text="${count.count}"></td>
        </th:block>
        <th:block>
          <td th:if="${item.light==1}" th:text="开"></td>
          <td th:if="${item.light==2}" th:text="'20%亮度'"></td>
          <td th:if="${item.light==5}" th:text="'50%亮度'"></td>
          <td th:if="${item.light==8}" th:text="'80%亮度'"></td>
          <td th:if="${item.light==10}" th:text="'100%亮度'"></td>
          <td th:if="${item.light==0}" th:text="关"></td>
        </th:block>
        <th:block>
          <td th:if="${item.charge==1}" th:text="充电"></td>
          <td th:if="${item.charge==0}" th:text="闲置"></td>
        </th:block>
        <td class="right-align hide-on-med-and-down">
          <div class="fixed-action-btn horizontal" style="position: relative; right: 0; top: 0;">
            <a class="btn-floating btn-large blue"><i class="material-icons">menu</i></a>
            <ul>
              <li>
                <a class="btn-floating blue waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="查看电路数据" href="#detail-singLamp"
                   th:onmouseover="'javascript:singLampData(\''+*{item.id}+'\')'">
                  <i class="material-icons">list_alt</i>
                </a>
              </li>
              <li>
                <a class="btn-floating blue waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="大气采集" href="#weather-modal"
                   th:onmouseover="'javascript:weather(\''+*{item.id}+'\')'">
                  <i class="material-icons">brightness_1</i>
                </a>
              </li>

              <li>
                <a class="btn-floating blue waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="查看详情" href="#detail-modal"
                   th:onmouseover="'javascript:detail(\''+*{item.id}+'\')'">
                  <i class="material-icons">more_horiz</i>
                </a>
              </li>
              <li th:if="${loginUser.id!=10}">
                <a  class="btn-floating green waves-effect waves-light tooltipped" data-position="top"
                   data-delay="50" data-tooltip="编辑"
                   th:href="@{${adminPath}+'/advertisementMachine/form?id='+${item.id}}">
                  <i class="material-icons">edit</i>
                </a>
              </li>
              <li th:if="${loginUser.id!=10}">
                <a  class="btn-floating red darken-1 waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="删除" href="#delete-modal"
                   th:onclick="'javascript:prepareForDeleting(\''+${item.id}+'\')'">
                  <i class="material-icons">delete</i>
                </a>
              </li>
            </ul>
          </div>
        </td>
        <td class="hide-on-large-only" id="mobile-table-item-buttons">
          <div class="fixed-action-btn click-to-toggle center-align"
               style="position: relative; left: 0; top: 0;">
            <a class="btn-floating blue"><i class="material-icons">menu</i></a>
            <ul>
              <li>
                <a class="btn-floating blue waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="查看详情" href="#detail-modal"
                   th:onclick="'javascript:detail(\''+*{item.id}+'\')'">
                  <i class="material-icons">more_horiz</i>
                </a>
              </li>
              <li th:if="${loginUser.id!=10}">
                <a th:if="${loginUser.id!=10}" class="btn-floating green waves-effect waves-light tooltipped" data-position="top"
                   data-delay="50" data-tooltip="编辑"
                   th:href="@{${adminPath}+'/advertisementMachine/form?id='+${item.id}}">
                  <i class="material-icons">edit</i>
                </a>
              </li>
              <li th:if="${loginUser.id!=10}">
                <a class="btn-floating red darken-1 waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="删除" href="#delete-modal"
                   th:onclick="'javascript:prepareForDeleting(\''+${item.id}+'\')'">
                  <i class="material-icons">delete</i>
                </a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      </tbody>
    </table>

    <div id="fixed-add-btn" class="fixed-action-btn" th:if="${loginUser.roleID==adminRoleID}">
      <a class="btn-floating btn-large waves-effect waves-light blue"
         th:href="@{${adminPath}+'/advertisementMachine/form'}">
        <i class="large material-icons">add</i>
      </a>
    </div>

    <div id="pagination-div" class="center">
      <ul class="pagination">
        <li  class="waves-effect">
          <h6 >共<b th:text="${page.total}"></b>条结果</h6>
          <a href="#"><i class="material-icons">chevron_left</i></a>
        </li>
        <li th:if="${!page.hasPreviousPage}" class="disabled">
          <a href="#"><i class="material-icons">chevron_left</i></a>
        </li>
        <li th:if="${page.hasPreviousPage}" class="waves-effect">
          <a th:href="@{${adminPath}+'/advertisementMachine/list/'+${page.prePage}}"><i
              class="material-icons">chevron_left</i></a>
        </li>
        <th:block th:each="number:${page.navigatepageNums}">
          <li th:if="${number==page.pageNum}" class="waves-effect" id="active-page">
            <a href="#" th:text="${number}"></a>
          </li>
          <li th:if="${number!=page.pageNum}" class="waves-effect">
            <a th:href="@{${adminPath}+'/advertisementMachine/list/'+${number}}"
               th:text="${number}"></a>
          </li>
        </th:block>
        <li th:if="${!page.hasNextPage}" class="disabled">
          <a href="#"><i class="material-icons">chevron_right</i></a>
        </li>
        <li th:if="${page.hasNextPage}" class="waves-effect">
          <a th:href="@{${adminPath}+'/advertisementMachine/list/'+${page.nextPage}}"><i
              class="material-icons">chevron_right</i></a>
        </li>
      </ul>
    </div>
  </div>
  <div id="weather-modal" style="height: 500px;width: 500px" class="modal modal-fixed-footer">
  </div>
  <div id="detail-modal" class="modal modal-fixed-footer">
    <div class="modal-content">
      <h4>详情</h4>
      <h6 class="green-text text-darken-2">广告机ID</h6>
      <p id="detail-item-id">id</p>
      <h6 class="green-text text-darken-2">名称</h6>
      <p id="detail-item-name">name</p>
      <h6 class="green-text text-darken-2">加入时间</h6>
      <p id="detail-item-add-time">addTime</p>
      <h6 class="green-text text-darken-2">所属用户</h6>
      <p id="detail-item-user-id">userID -> username</p>
      <h6 class="green-text text-darken-2">机器识别码</h6>
      <p id="detail-item-code-number">codeNumber</p>
      <h6 class="green-text text-darken-2">坐标经度</h6>
      <p id="detail-item-longitude">longitude</p>
      <h6 class="green-text text-darken-2">坐标维度</h6>
      <p id="detail-item-latitude">latitude</p>
      <h6 class="green-text text-darken-2">广告数</h6>
      <p id="detail-item-ads">ads count</p>
      <h6 class="green-text text-darken-2">状态 (灯/充电)</h6>
      <p id="detail-item-status">status</p>
      <h6 class="green-text text-darken-2">地址</h6>
      <p id="detail-item-addrStr">addrStr</p>
      <h6 class="green-text text-darken-2">备注</h6>
      <p id="detail-item-remark">remark</p>
      <h6 class="green-text text-darken-2">摄像头ip</h6>
      <p id="detail-item-cameraIP">cameraIP</p>
      <h6 class="green-text text-darken-2">摄像头序列号</h6>
      <p id="detail-item-cameraSequence">cameraSequence</p>
      <h6 class="green-text text-darken-2">摄像头设备验证码</h6>
      <p id="detail-item-cameraVerificationCode">cameraVerificationCode</p>
    </div>
    <div class="modal-footer">
      <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">关闭</a>
    </div>
  </div>
  <div id="detail-singLamp" class="modal modal-fixed-footer">
    <div class="modal-content">
      <h4>详情</h4>最新更新时间：<p id="detail-singLamp-updateTime" style="color: red"></p>
        <div id="typediv1">
     <table id="singLampTable" class="highlight">
       <tr>
         <th>故障位</th><th>电压</th><th>电流</th><th>频率</th>
       </tr>
       <tr>
         <th id="currError">currError</th><th id="gridVolt">gridVolt</th><th id="gridCurr">gridCurr</th><th id="gridFreq">gridFreq</th>
       </tr>
       <tr>
         <th>电网PF</th><th>电网有功</th><th>电网无功</th><th>温度</th>
       </tr>
       <tr>
         <th id="gridPF">gridPF</th><th id="gridAP">gridAP</th><th id="gridRP">gridRP</th><th id="temperature">temperature</th>
       </tr>
       <tr>
         <th>亮灯</th><th>工作时间</th><th>累计时间</th><th>本次用电量</th>
       </tr>
       <tr>
         <th id="ledDim">ledDim</th><th id="workTime">workTime</th><th id="workTimeT">workTimeT</th><th id="energyTonight">energyTonight</th>
       </tr>
       <tr>
         <th>累计用电量</th><th>灯头照度值</th><th>当天负载峰值功率</th><th>历史负载峰值功率</th>
       </tr>
       <tr>
         <th id="energyTotal">energyTotal</th><th id="ledLux">ledLux</th><th id="ppkToday">ppkToday</th><th id="ppkHistory">ppkHistory</th>
       </tr>
       <tr>
         <th>当日用电</th><th>经济收益</th><th>CO2减排量</th><th>月用电</th>
       </tr>
       <tr>
         <th id="energyToday">energyToday</th><th id="saveMoneyT">saveMoneyT</th><th id="cO2T">cO2T</th><th id="energyMonth">energyMonth</th>
       </tr>
       <tr>
         <th>当月经济收益</th><th>当月CO2排放量</th><th>年电量</th><th>当年经济收益</th>
       </tr>
       <tr>
         <th id="saveMoneyMonth">saveMoneyMonth</th><th id="cO2Month">cO2Month</th><th id="gridEnergyYear">gridEnergyYear</th><th id="saveMoneyYear">saveMoneyYear</th>
       </tr>
       <tr><th>当年CO2减排量</th></tr>
       <tr><th id="cO2Year">cO2Year</th></tr>
     </table>
        </div>
    </div>
    <div class="modal-footer">
      <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">关闭</a>
    </div>
  </div>

  <div id="delete-modal" class="modal">
    <form th:action="@{${adminPath}+'/advertisementMachine/delete'}">
      <div class="modal-content">
        <h4>注意！</h4>
        <input name="deleteToken" type="hidden" th:value="${deleteToken}">
        <input id="delete-confirm-id" name="id" type="hidden"/>
        <p>是否要删除广告机 <span id="delete-name"></span> ?</p>
      </div>
      <div class="modal-footer">
        <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">不是</a>
        <button type="submit" class="modal-action modal-close waves-effect btn-flat">是</button>
      </div>
    </form>
  </div>
</main>
<th:block th:include="/common/footer::footer"/>
<th:block th:include="/common/script::script"/>
<script type="text/javascript">
    jQuery(function($){
        $("#selectAll").click(function(){
            $("input[name='checkbox']").prop("checked","true");
            document.getElementById("closeAll").style.display="block";
            document.getElementById("selectAll").style.display="none";
        })
        $("#closeAll").click(function(){
            $("input[name='checkbox']").prop("checked",false);
            document.getElementById("selectAll").style.display="block";
            document.getElementById("closeAll").style.display="none";
        })
        $("#openLight").click(function(){
            var adIds = [];
            var operate = $("#control_light").val();
            $("input:checkbox[name=checkbox]:checked").each(function(i){
                    // adIds = $(this).val();
                    adIds.push($(this).val())
                    // adIds += (","+$(this).val());
            });
            var url = '[[${adminPath}]]/advertisementMachine/lightBatch';
            var update='[[${adminPath}]]/advertisementMachine/list/1';
            $.ajax({
                url:url,
                data:{"adIds":adIds,"operate":operate},
                traditional :true,
                dataType:"json",
                type:"post",
                success:function (data) {
                    window.location='/mng/advertisementMachine/list/1'
                },error:function () {
                    window.location='/mng/advertisementMachine/list/1'
                }
            });
        })
    })
  $(function () {
    resize_footer(window.screen.width);
    $('#button-nav-menu').sideNav({
      closeOnClick: true,
      draggable: true
    });
    $('.dropdown-button').dropdown();
    $('.date-picker').pickadatee({
      closeOnSelect: true
    });
    $("#detail-modal").modal();
    $("#delete-modal").modal();
    $("#weather-modal").modal();
    $("#detail-singLamp").modal();
    toast('[[${message}]]');

    //除了表头（第一行）以外所有的行添加click事件.
    $("tr").slice(1).click(function () {
      // 切换样式
      $(this).toggleClass("tr_active");
      // 找到checkbox对象
      var chks = $("input[type='checkbox']",this);
      var tag = $(this).attr("tag");
      if(tag=="selected"){
          // 之前已选中，设置为未选中
          $(this).attr("tag","");
          chks.prop("checked",false);
      }else{
          // 之前未选中，设置为选中
          $(this).attr("tag","selected");
          chks.prop("checked",true);
      }
    });

  });
    function singLampData(id) {
        var url = '[[${adminPath}]]/singLamp/detail/' + id;
        $.ajax({
            url:url,
            dataType:"JSON",
            type:"GET",
            success:function (data) {
                if (data.length == 0){
                    document.getElementById("typediv1").style.visibility="hidden";
                    $("#detail-singLamp-updateTime").text("该设备无单灯控制器数据");
                } else {
                    document.getElementById("typediv1").style.visibility="visible";
                    $("#detail-singLamp-updateTime").text(data[0].updateTime);
                    $("#currError").text(data[0].currError);
                    $("#gridVolt").text(data[0].gridVolt);
                    $("#gridCurr").text(data[0].gridCurr);
                    $("#gridPF").text(data[0].gridPF);
                    $("#gridAP").text(data[0].gridAP);
                    $("#gridRP").text(data[0].gridRP);
                    $("#gridFreq").text(data[0].gridFreq);
                    $("#temperature").text(data[0].temperature);
                    $("#ledDim").text(data[0].ledDim);
                    $("#ppkToday").text(data[0].ppkToday);
                    $("#workTime").text(data[0].workTime);
                    $("#workTimeT").text(data[0].workTimeT);
                    $("#energyTonight").text(data[0].energyTonight);
                    $("#energyTotal").text(data[0].energyTotal);
                    $("#ledLux").text(data[0].ledLux);
                    $("#ppkHistory").text(data[0].ppkHistory);
                    $("#energyToday").text(data[0].energyToday);
                    $("#saveMoneyT").text(data[0].saveMoneyT);
                    $("#cO2T").text(data[0].cO2T);
                    $("#energyMonth").text(data[0].energyMonth);
                    $("#saveMoneyMonth").text(data[0].saveMoneyMonth);
                    $("#cO2Month").text(data[0].cO2Month);
                    $("#gridEnergyYear").text(data[0].gridEnergyYear);
                    $("#saveMoneyYear").text(data[0].saveMoneyYear);
                    $("#cO2Year").text(data[0].cO2Year);
                }
            }
        });
    }

    function weather(id) {
        var url = '[[${adminPath}]]/advertisementMachine/weather/' + id;
        $.ajax({
            url:url,
            type:"GET",
            success:function (data) {
                var id = data['weather'].machineID;
                var temperature = data['weather'].temperature;
                var brightness = data['weather'].brightness;
                var pm25 = data['weather'].pm25;
                var humidity = data['weather'].humidity;
                var dom = document.getElementById("weather-modal");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title: {
                        text:'id为'+id+ '号设备大气数据信息柱状显示图',
                        x: '10',
                        y: '10',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 24,
                            color: "blue",
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['温度', '湿度', '空气污染指数', '亮度']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                // formatter: '{c},({d}%)'//多值的嵌套
                            }
                        },
                        data: [temperature, brightness, pm25, humidity],
                        type: 'bar'
                    }]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            },error:function () {
            }
        });
    }
  function detail(id) {
    var url = '[[${adminPath}]]/advertisementMachine/detail/' + id;
    $.ajax({
      url: url,
      type: "GET",
      success: function (data) {
        $("#detail-item-id").text(data['machine'].id);
        $("#detail-item-name").text(data['machine'].name);
        $("#detail-item-add-time").text(data['machine'].addTime);
        $("#detail-item-user-id").text(data['owner']);
        $("#detail-item-code-number").text(data['machine'].codeNumber);
        $("#detail-item-longitude").text(data['machine'].longitude);
        $("#detail-item-latitude").text(data['machine'].latitude);
        $("#detail-item-ads").text(data['ads']);
        $("#detail-item-status").text(data['status']);
        $("#detail-item-addrStr").text(data['machine'].addrStr);
        $("#detail-item-remark").text(data['machine'].remark);
        $("#detail-item-cameraIP").text(data['machine'].cameraIP);
        $("#detail-item-cameraSequence").text(data['machine'].cameraSequence);
        $("#detail-item-cameraVerificationCode").text(data['machine'].cameraVerificationCode);
      },
      error: function () {
      }
    });
  }

  function prepareForDeleting(id) {
    $("#delete-confirm-id").val(id);
    $.ajax({
      url: '[[${adminPath}]]/advertisementMachine/detail/' + id,
      type: "GET",
      success: function (data) {
        $("#delete-name").text(data['ad'].name);
      }
    })
  }
</script>
</body>
</html>
